<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <title>购物车页面</title>

  <link href="static/css/amazeui.css" rel="stylesheet" type="text/css"/>
  <link href="static/css/demo.css" rel="stylesheet" type="text/css"/>
  <link href="static/css/cartstyle.css" rel="stylesheet" type="text/css"/>
  <link href="static/css/optstyle.css" rel="stylesheet" type="text/css"/>

  <script type="text/javascript" src="static/js/jquery.js"></script>

</head>

<body>
<div id="container6">
  <!--顶部导航条 -->
  <div class="am-container header">
    <ul class="message-l">
      <div class="topMessage">
        <div class="menu-hd">
          <a href="#" target="_top" class="h">亲，请登录</a>
          <a href="#" target="_top">免费注册</a>
        </div>
      </div>
    </ul>
    <ul class="message-r">
      <div class="topMessage home">
        <div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
      </div>
      <div class="topMessage my-shangcheng">
        <div class="menu-hd MyShangcheng"><a href="user-center.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
        </div>
      </div>
      <div class="topMessage mini-cart">
        <div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i
          class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                class="h">0</strong></a></div>
      </div>
      <div class="topMessage favorite">
        <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
        </div>
      </div>
    </ul>
  </div>

  <!--悬浮搜索框-->

  <div class="nav white">
    <div class="logo"><img src="static/images/logo.png"/></div>
    <div class="logoBig">
      <li><img src="static/images/logobig.png"/></li>
    </div>

    <div class="search-bar pr">
      <a name="index_none_header_sysc" href="#"></a>
      <form>
        <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
        <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
      </form>
    </div>
  </div>

  <div class="clear"></div>

  <!--购物车 -->
  <div class="concent">
    <div id="cartTable">
      <div class="cart-table-th">
        <div class="wp">
          <div class="th th-chk">
            <div id="J_SelectAll1" class="select-all J_SelectAll">

            </div>
          </div>
          <div class="th th-item">
            <div class="td-inner">商品信息</div>
          </div>
          <div class="th th-price">
            <div class="td-inner">单价</div>
          </div>
          <div class="th th-amount">
            <div class="td-inner">数量</div>
          </div>
          <div class="th th-sum">
            <div class="td-inner">金额</div>
          </div>
          <div class="th th-op">
            <div class="td-inner">操作</div>
          </div>
        </div>
      </div>
      <div class="clear"></div>

      <div class="clear"></div>

      <template v-for="(shopcart, index) in shoppingCarts">
        <tr class="item-list">
          <div class="bundle  bundle-last ">
            <div class="clear"></div>
            <div class="bundle-main">
              <ul class="item-content clearfix">
                <li class="td td-chk">
                  <div class="cart-checkbox ">
                    <input class="check" v-model="opts" id="J_CheckBox_170769542747" name="items[]" :value="index" type="checkbox">
                    <label for="J_CheckBox_170769542747"></label>
                  </div>
                </li>
                <li class="td td-item">
                  <div class="item-pic">
                    <a :href="'introduction.html?pid=' + shopcart.productId" target="_blank" :data-title="shopcart.productName" class="J_MakePoint"
                       data-point="tbcart.8.12">
                      <img :src="'static/images/' + shopcart.productImg" height="70" class="itempic J_ItemImg"></a>
                  </div>
                  <div class="item-info">
                    <div class="item-basic-info">
                      <a :href="'introduction.html?pid=' + shopcart.productId" target="_blank" :title="shopcart.productName" class="item-title J_MakePoint"
                         data-point="tbcart.8.11">{{ shopcart.productName }} {{ shopcart.skuName }}</a>
                    </div>
                  </div>
                </li>
                <li class="td td-info">
                  <div class="item-props item-props-can">
                    <span class="sku-line">{{ shopcart.skuProps }}</span>
                  </div>
<!--                  <div class="item-props item-props-can">
                    <span class="sku-line">颜色：10#蜜橘色</span>
                    <span class="sku-line">包装：两支手袋装（送彩带）</span>
                    <span tabindex="0" class="btn-edit-sku theme-login">修改</span>
                    <i class="theme-login am-icon-sort-desc"></i>
                  </div>-->
                </li>
                <li class="td td-price">
                  <div class="item-price price-promo-promo">
                    <div class="price-content">
                      <div class="price-line">
                        <em class="price-original">{{ shopcart.originalPrice }}</em>
                      </div>
                      <div class="price-line">
                        <em class="J_Price price-now" tabindex="0">{{ shopcart.sellPrice }}</em>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="td td-amount">
                  <div class="amount-wrapper ">
                    <div class="item-amount ">
                      <div class="sl">
                        <input class="min am-btn" name="" type="button" value="-" @click="changeNum(index, -1)"/>
                        <input class="text_box" v-model="shopcart.cartNum" type="text" style="width:30px;"/>
                        <input class="add am-btn" name="" type="button" value="+" @click="changeNum(index, 1)"/>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="td td-sum">
                  <div class="td-inner">
                    <em tabindex="0" class="J_ItemSum number">{{ shopcart.cartNum * shopcart.sellPrice }}</em>
                  </div>
                </li>
                <li class="td td-op">
                  <div class="td-inner">
<!--                    <a title="移入收藏夹" class="btn-fav" href="#">
                      移入收藏夹</a>-->
                    <a href="javascript:;" data-point-url="#" class="delete">
                      删除</a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </tr>
      </template>
      </div>
    <div class="clear"></div>
    <div class="float-bar-wrapper">
      <div id="J_SelectAll2" class="select-all J_SelectAll">
        <div class="cart-checkbox">
          <input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
          <label for="J_SelectAllCbx2"></label>
        </div>
        <span>全选</span>
      </div>
      <div class="operations">
        <a href="#" hidefocus="true" class="deleteAll">删除</a>
        <a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
      </div>
      <div class="float-bar-right">
        <div class="amount-sum">
          <span class="txt">已选商品</span>
          <em id="J_SelectedItemsCount">{{ opts.length }}</em><span class="txt">件</span>
          <div class="arrow-box">
            <span class="selected-items-arrow"></span>
            <span class="arrow"></span>
          </div>
        </div>
        <div class="price-sum">
          <span class="txt">合计:</span>
          <strong class="price">¥<em id="J_Total">{{ totalPrice }}</em></strong>
        </div>
        <div class="btn-area" @click="gotoOrderAdd">
          <a href="order-add.html" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
            <span>结&nbsp;算</span></a>
        </div>
      </div>

    </div>
    <div class="footer">
      <div class="footer-hd">
        <p>
          <a href="#">锋迷商城</a>
          <b>|</b>
          <a href="#">商城首页</a>
          <b>|</b>
          <a href="#">支付宝</a>
          <b>|</b>
          <a href="#">物流</a>
        </p>
      </div>
      <div class="footer-bd">
        <p>
          <a href="#">关于千锋</a>
          <a href="#">合作伙伴</a>
          <a href="#">联系我们</a>
          <a href="#">网站地图</a>
          <em>©qfedu.com 版权所有</em>
        </p>
      </div>
    </div>
  </div>
  <!--操作页面-->
  <div class="theme-popover-mask"></div>
  <div class="theme-popover">
    <div class="theme-span"></div>
    <div class="theme-poptit h-title">
      <a href="javascript:;" title="关闭" class="close">×</a>
    </div>
    <div class="theme-popbod dform">
      <form class="theme-signin" name="loginform" action="" method="post">

        <div class="theme-signin-left">

          <li class="theme-options">
            <div class="cart-title">颜色：</div>
            <ul>
              <li class="sku-line selected">12#川南玛瑙<i></i></li>
              <li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
            </ul>
          </li>
          <li class="theme-options">
            <div class="cart-title">包装：</div>
            <ul>
              <li class="sku-line selected">包装：裸装<i></i></li>
              <li class="sku-line">两支手袋装（送彩带）<i></i></li>
            </ul>
          </li>
          <div class="theme-options">
            <div class="cart-title number">数量</div>
            <dd>
              <input class="min am-btn am-btn-default" name="" type="button" value="-"/>
              <input class="text_box" name="" type="text" value="1" style="width:30px;"/>
              <input class="add am-btn am-btn-default" name="" type="button" value="+"/>
              <span class="tb-hidden">库存<span class="stock">1000</span>件</span>
            </dd>

          </div>
          <div class="clear"></div>
          <div class="btn-op">
            <div class="btn am-btn am-btn-warning">确认</div>
            <div class="btn close am-btn am-btn-warning">取消</div>
          </div>

        </div>
        <div class="theme-signin-right">
          <div class="img-info">
            <img src="static/images/kouhong.jpg_80x80.jpg"/>
          </div>
          <div class="text-info">
            <span class="J_Price price-now">¥39.00</span>
            <span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
          </div>
        </div>

      </form>
    </div>
  </div>
  <!--引导 -->
  <div class="navCir">
    <li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
    <li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
    <li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
    <li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>
  </div>
</div>
<script type="text/javascript" src="static/js/cookie-utils.js"></script>
<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript" src="static/js/axios.min.js"></script>
<script type="text/javascript" src="static/js/base.js"></script>

<script type="text/javascript">
  var baseUrl = "http://localhost:8080";
  // var baseUrl = "http://47.113.207.152:8080";

  var vm = new Vue({
    el: "#container6",
    data: {
      token: "",
      userId: "",
      shoppingCarts: [],
      opts: [],
      totalPrice: 0.00
    },
    created() {
      // 当进入购物车页面时，就要查询购物车的列表（访问购物车列表接口）
      this.token = getCookieValue("token");
      this.userId = getCookieValue("userId")
      if (this.token == null ) {
        var loginUrl = "login.html?tips=请先登录&returnUrl=shopcart.html"
        window.location.href = encodeURI(loginUrl)
      } else {
        //请求当前用户的购物车记录
        axios({
          method: "get",
          url: baseUrl + "/shopcart/list",
          headers: {
            token: this.token
          },
          params: {
            userId: this.userId
          }
        }).then(res => {
          if (res.data.code == 20002 || res.data.code == 20001) {
            //token 过期
            var loginUrl = "login.html?tips=token已过期，请重新登录&returnUrl=shopcart.html"
            window.location.href = encodeURI(loginUrl)
          } else if (res.data.code == 10000) {
            // 请求成功
            this.shoppingCarts = res.data.data
            console.log(this.shoppingCarts)
          } else if (res.data.code == 10001) {
            // 请求失败
          }
        })
      }
    },
    methods: {
      changeNum(index, m) {
        if (m == -1 && this.shoppingCarts[index].cartNum > 1) {
          this.shoppingCarts[index].cartNum = parseInt(this.shoppingCarts[index].cartNum) - 1
        } else if (m == 1 && this.shoppingCarts[index].cartNum < this.shoppingCarts[index].stock) {
          this.shoppingCarts[index].cartNum = parseInt(this.shoppingCarts[index].cartNum) + 1
        }

        //请求购物车修改接口: cartId num
        var cid = this.shoppingCarts[index].cartId
        var cnum = this.shoppingCarts[index].cartNum
        var url = baseUrl + "/shopcart/update/" + cid + "/" + cnum
        axios({
          url: url,
          method: "put",
          headers: {
            token: this.token
          }
        }).then(res => {
          console.log(res.data)
          if (res.data.code == 10000) {
            this.totalPrice = 0.00
            for (let i = 0; i < this.opts.length; i++) {
              var index = this.opts[i] //index就是选择的购物车索引
              this.totalPrice = this.totalPrice + this.shoppingCarts[index].cartNum * this.shoppingCarts[index].sellPrice
            }
          }
        })
      },
      gotoOrderAdd() {
        if (this.opts.length == 0) {
          alert("请选择要购买的商品")
        } else {
          // 1.获取选择的购物车记录的id [0,1] ---> cartId 1  cartId 10 --- 1,10
          var cids = ""
          for (var i = 0; i < this.opts.length; i++) {
            var index = this.opts[i]
            var cartId = this.shoppingCarts[index].cartId
            if (i < this.opts.length - 1) {
              // 不是最后一个
              cids = cids + cartId + ","
            } else {
              // 最后一个
              cids = cids + cartId
            }
          }
          // console.log(cids)
          // 2.跳转到order-add.html，并将cids传递过去
          window.location.href = "order-add.html?cids=" + cids
        }
      }
    },
    watch: {
      opts() {
        this.totalPrice = 0.00
        for (let i = 0; i < this.opts.length; i++) {
          var index = this.opts[i] //index就是选择的购物车索引
          this.totalPrice = this.totalPrice + this.shoppingCarts[index].cartNum * this.shoppingCarts[index].sellPrice
        }
      }
    }
  });

</script>
</body>

</html>
